<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <!-- 必要的标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--&lt;!&ndash;<nav class="navbar navbar-expand-lg navbar-light bg-light">&ndash;&gt;-->
<!--    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">-->
<!--        <span class="navbar-toggler-icon"></span>-->
<!--    </button>-->
<!--&lt;!&ndash;    <a class="navbar-brand" href="#">项目IO</a>&ndash;&gt;-->

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="#">主页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">学生</a>
            </li>
            <li class="nav-item">
                <a class="nav-link " href="#">项目</a>
            </li>
        </ul>
        </form>
    </div>
</nav>
<nav th:replace="layouts ::navbar"></nav>
    <h3>主面板</h3>
    <p th:text="${versionNumber}"></p>
     <hr>
   <div class="row">
       <div class="col-md-6">
   <h4>当前项目</h4>
   <table class="table table-bordered table-striped">
     <thead class="thead-dark">
     <th>项目名称</th>
     <th>项目状态</th>
     </thead>
     <tbody>
     <tr th:each="aProject :${projects}">
       <td th:text="${aProject.name}"></td>
       <td th:text="${aProject.stage}"></td>
     </tr>
     </tbody>
   </table>
       </div>
   </div>
        <script>
            let charData = "[[${projectStatusData}]]"
        </script>

        <h4>当前学生</h4>
       <div class="row">
         <div class="col-md-6">
       <table class="table table-bordered table-striped">
           <thead class="thead-dark">
           <th>学生名字</th>
           <th>微信号</th>
           <th>项目个数</th>
           </thead>
           <tbody>
           <tr th:each="astudent :${studentProject}">
               <td th:text="${astudent.name}"></td>
               <td th:text="${astudent.wechatId}"></td>
               <td th:text="${astudent.projectCount}"></td>
           </tr>
           </tbody>
       </table>
         </div>
   </div>
   <div class="col-md-4">
       <canvas id="myPieChart" height="50" width="50">

       </canvas>
   </div>
   <script type="text/javascript" th:src="@{js/myChart.js}"></script>
</body>
</html>